<template>
  <view class="new_main" ref="canvas" id="answerDetail">
    <topCommonTitleBar
      title="回答详情"
      arrow="black"
      dot-color="#333"
      titleColor="#333"
      title-size="36rpx"
      title-weight="bold"
      :show-dot="true"
      @actionClick="actionClick"
    />
    <scroll-view class="scroll_cot" scroll-y="true">
      <view v-if="quizObj.offiicalreply != null" class="answer_official">
        <image
          src="/static/img/exchange/official_answer.png"
          class="official_img"
        ></image>
        <view class="official_text">
          <text>
            {{ quizObj.offiicalreply }}
          </text>
        </view>
      </view>
      <view class="answer_header">
        <view class="header_user">
          <u-avatar
            @click="go(quizObj.uid)"
            :src="quizObj.avatar"
            :size="40"
            mode="aspectFill"
          ></u-avatar>
          <view class="userInfo">
            <text class="user_name">
              {{ quizObj.nickname }}
            </text>
            <text class="user_time">
              {{ quizObj.add_time_text }}
            </text>
          </view>
        </view>
        <view class="answer_title">
          <text
            v-if="labelList.length > 0"
            class="answer_title_tags"
            v-for="(item, index) in labelList"
            :key="index"
            >#{{ item }}#</text
          >
          <text>{{ quizObj.title }}</text>
        </view>
      </view>
      <view class="answer_body">
        <view class="answer_free">
          <u-avatar
            :src="addUrlAvatar(quizObj.avatar)"
            :size="40"
            mode="aspectFill"
          ></u-avatar>
          <image
            v-if="quizObj.quiz_is_major == 1"
            class="v_icon"
            src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/csjh/img/V.png"
          ></image>
          <view class="answer_chat">
            <view class="answer_chat_name">
              <view>{{ quizObj.nickname }} {{ quizObj.add_time_text }}</view>
            </view>
            <view class="answer_chat_content">
              <text>
                {{ quizObj.title }}
              </text>
            </view>
          </view>
        </view>
        <view
          v-if="quizObj.info_images != ''"
          v-for="(val, index) in imgList"
          :key="index + 1"
          class="answer_free"
        >
          <u-avatar
            :src="addUrlAvatar(quizObj.avatar)"
            :size="40"
            mode="aspectFill"
          ></u-avatar>
          <image
            v-if="quizObj.quiz_is_major == 1"
            class="v_icon"
            src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/csjh/img/V.png"
          ></image>
          <view class="answer_chat">
            <view class="answer_chat_name">
              <view>{{ quizObj.nickname }} {{ quizObj.add_time_text }}</view>
            </view>
            <view class="answer_chat_content">
              <image
                :src="val"
                @click="viewImg(val)"
                class="answer_chat_content_img"
                mode="aspectFit"
              ></image>
            </view>
          </view>
        </view>

        <view
          class="answer_avatar"
          v-for="(item, index) in allNewList"
          :key="item.id"
        >
          <view
            v-if="item.userId == quizObj.uid && item.msgRevoke == 0"
            class="answer_left"
          >
            <u-avatar
              :src="getAvatar(item.message.extendedData.id)"
              :size="40"
              mode="aspectFill"
            ></u-avatar>
            <image
              v-if="quizObj.quiz_is_major == 1"
              class="v_icon"
              src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/csjh/img/V.png"
            ></image>
            <view class="answer_chat">
              <view class="answer_chat_name">
                <text
                  >{{ getNickname(item.message.extendedData.id) }}
                  {{ item.createTime }}</text
                >
              </view>
              <view class="answer_chat_content">
                <text v-if="item.message.extendedData.type == 1">
                  {{ item.message.message }}
                </text>
                <image
                  v-if="item.message.extendedData.type == 11"
                  :src="item.message.message"
                  class="answer_chat_content_img"
                  @click="viewImg(item.message.message)"
                  mode="aspectFit"
                ></image>

                <!-- 表情 -->
                <image
                  v-if="item.message.extendedData.type == 111"
                  :src="item.message.message"
                  class="msg_emoji"
                  mode="widthFix"
                ></image>
              </view>

              <!-- 引用的消息展示 -->
              <view
                v-if="item.message.extendedData.quoteMsg != null"
                class="quote_msg_left"
              >
                <text class="txt_item"
                  >{{ item.message.extendedData.quoteMsg.nickname }}:{{
                    item.message.extendedData.quoteMsg.message
                  }}</text
                >
              </view>
            </view>
          </view>
          <view
            v-if="item.userId !== quizObj.uid && item.msgRevoke == 0"
            class="answer_right"
          >
            <view class="answer_chat">
              <view class="answer_chat_name">
                <view
                  >{{ item.createTime }}
                  {{ getNickname(item.message.extendedData.id) }}</view
                >
              </view>
              <view class="answer_chat_content">
                <text v-if="item.message.extendedData.type == 1">
                  {{ item.message.message }}
                </text>
                <image
                  v-if="item.message.extendedData.type == 11"
                  :src="item.message.message"
                  class="answer_chat_content_img"
                  @click="viewImg(item.message.message)"
                  mode="widthFix"
                ></image>

                <!-- 表情 -->
                <image
                  v-if="item.message.extendedData.type == 111"
                  :src="item.message.message"
                  class="msg_emoji"
                  mode="widthFix"
                ></image>
              </view>
              <!-- 引用的消息展示 -->
              <view
                v-if="item.message.extendedData.quoteMsg != null"
                class="quote_msg_left"
              >
                <text class="txt_item"
                  >{{ item.message.extendedData.quoteMsg.nickname }}:{{
                    item.message.extendedData.quoteMsg.message
                  }}</text
                >
              </view>
            </view>
            <u-avatar
              :src="getAvatar(item.message.extendedData.id)"
              :size="40"
              mode="aspectFill"
            ></u-avatar>
            <image
              v-if="quizObj.ans_is_major == 1"
              class="v_icon"
              src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/csjh/img/V.png"
            ></image>
          </view>
        </view>

        <!-- 老师补充 -->
        <view class="patch" v-if="supplementList.length > 0">
          <view class="flex_align">
            <image
              class="icon_bc"
              src="/static/img/exchange/icon-bc1.png"
              mode=""
            ></image>
            <view class="c22b">老师补充</view>
          </view>
          <view class="content_item">
            <view
              class="item flex"
              v-for="(item, index) in supplementList"
              :key="index"
            >
              <view style="position: relative">
                <image
                  class="v_icon"
                  src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/csjh/img/V.png"
                >
                </image>
                <u-avatar
                  :src="item.message.extendedData.avatar"
                  mode="aspectFill"
                ></u-avatar>
              </view>
              <view class="info ml20">
                <view class="flex fz24 c999">
                  <text class="mr10">{{
                    item.message.extendedData.nickname
                  }}</text>
                  <text>{{ item.createTime }}</text>
                </view>
                <view
                  class="content mt10"
                  v-if="item.message.extendedData.type == 1"
                >
                  {{ item.message.message }}
                </view>
                <image
                  v-if="item.message.extendedData.type == 11"
                  :src="item.message.message"
                  class="content_img"
                  @click="viewImg(item.message.message)"
                  mode="aspectFit"
                ></image>
              </view>
            </view>
          </view>
        </view>

        <view class="pushFlow">
          <view class="ticket">
            <image
              class="ticket_img"
              src="/static/img/exchange/ticket_icon_wx.png"
              mode="scaleToFill"
            />
            <view class="ticket_content">
              <view class="ticket_title">领取问答券</view>
              <view class="ticket_des">关注公众号，免费领取问答券</view>
            </view>
          </view>
          <view class="ticket_btn" @click="appJumpWx('gh_54c7ed1b5bfc')"
            >免费领取问答券</view
          >
        </view>
      </view>

      <view class="answer_review">
        <view class="answer_title">
          <text>评论</text>
        </view>
        <view v-if="commentList.length == 0" class="review_show">
          <text>暂无评论，快来献上一条热评~</text>
        </view>
        <view
          v-if="commentList.length > 0"
          class="review_body"
          v-for="item in commentList"
          :key="item.id"
        >
          <view class="review_content">
            <view class="review_left">
              <image
                v-if="item.is_major == 1"
                class="v_icon"
                src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/csjh/img/V.png"
              ></image>
              <u-avatar
                :src="item.avatar"
                :size="30"
                mode="aspectFill"
              ></u-avatar>
              <view class="review_user">
                <view class="review_user_name">
                  <text>
                    {{ item.nickname }}
                  </text>
                </view>
                <view class="review_user_answer">
                  <text>
                    {{ item.content }}
                  </text>
                </view>
                <view class="review-user_time">
                  <text>
                    {{ item.add_time_text }}
                  </text>
                </view>
              </view>
            </view>
            <view class="review_right">
              <view class="right_top" @click="likeCount(item)">
                <u-icon
                  :name="item.is_givelike ? 'thumb-up-fill' : 'thumb-up'"
                  size="36rpx"
                  :color="item.is_givelike ? '#1C87F3' : '#666666'"
                ></u-icon>
                <text
                  class="review_right_text"
                  :class="{ 'good_text': item.is_givelike }"
                  >{{ item.like_num }}</text
                >
              </view>
              <view v-if="item.is_self == '1'" class="right_bottom">
                <text @click="delCommentShow(item)">删除</text>
              </view>
            </view>
          </view>
          <view class="perch_color"></view>
        </view>
      </view>
    </scroll-view>
    <view class="answer_bto">
      <u--input
        border="none"
        placeholder="献上一条热评"
        prefixIcon="edit-pen"
        prefixIconStyle="font-size: 22px;color: ##999999"
        shape="circle"
        @focus="focusText"
        @blur="blurText"
        v-model="commentContent"
        :customStyle="{
          background: '#f6f6f6',
          height: '70rpx',
          paddingLeft: '36rpx',
          fontSize: '24rpx',
          color: '#9E9E9E',
        }"
      ></u--input>
      <view
        v-if="collectShow"
        class="answer_bto_collect"
        @click="collectDetail"
      >
        <image :src="menuList[1].icon" class="answer_bto_img"></image>
      </view>
      <view
        v-if="!collectShow"
        class="answer_bto_submit"
        :class="{ 'answer_bto_submit_color': commentShow }"
      >
        <text @click="postComment">发布</text>
      </view>
    </view>
    <u-popup
      :show="showMore"
      :round="15"
      :closeOnClickOverlay="true"
      :customStyle="{ backgroundColor: 'transparent' }"
      class="showMore"
      @close="showMore = false"
    >
      <view class="moreItem">
        <view
          class="item"
          v-for="(item, index) in menuList"
          :key="item.id"
          @click="menuClick(item)"
        >
          <image :src="item.icon" class="icon"></image>
          <view class="title">{{ item.name }}</view>
        </view>
      </view>
      <view class="close" @click="showMore = false">取消</view>
    </u-popup>
    <!-- 删除评论提示 -->
    <u-modal
      :show="delShow"
      title="提示"
      content="确认删除这条评论？"
      confirmText="删除"
      showCancelButton
      cancelColor="#999999"
      width="548rpx"
      @confirm="delComment"
      @cancel="delShow = false"
    ></u-modal>
    <!-- 删除评论提示 end -->

    <!-- 完成任务弹窗 -->
    <pointsTips
      v-if="showPointsTips"
      :title="pointsObj.name"
      :points="pointsObj.amount"
    ></pointsTips>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../quiz/askInfo/index"
></script>

<style lang="scss" scoped>
.new_main {
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  position: relative;
}

.scroll_cot {
  height: calc(100vh - 90px);
  overflow: hidden;
  background-color: #fff;
}

.answer_official {
  margin-top: 40rpx;
  padding: 0 30rpx;
  position: relative;

  .official_img {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    right: 30rpx;
    top: -30rpx;
  }

  .official_text {
    padding: 24rpx 28rpx;
    background-color: #fffaf1;
    color: #968360;
    font-size: 24rpx;
  }
}

.answer_header {
  margin-top: 30rpx;
  padding: 0 30rpx;

  .header_user {
    display: flex;
    align-items: center;

    .userInfo {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 70rpx;
      margin-left: 15rpx;

      .user_name {
        color: #333;
        font-size: 24rpx;
      }

      .user_time {
        color: #999;
        font-size: 22rpx;
      }
    }
  }

  .answer_title {
    margin-top: 40rpx;
    font-size: 30rpx;
    line-height: 44rpx;

    .answer_title_tags {
      color: #1c87f3;
    }
  }
}

.msg_emoji {
  width: 200rpx;
  height: 200rpx;
}

.answer_body {
  background-color: #f6f6f6;
  margin-top: 32rpx;
  padding: 42rpx 30rpx 100rpx 30rpx;

  .answer_free {
    margin-bottom: 42rpx;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;

    .v_icon {
      position: absolute;
      left: 52rpx;
      top: 60rpx;
      width: 26rpx;
      height: 26rpx;
    }

    .answer_chat {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .answer_chat_name {
        font-size: 24rpx;
        color: #999;
      }

      .answer_chat_content {
        margin-top: 15rpx;
        max-width: 456rpx;
        color: #333333;
        font-size: 28rpx;
        background-color: #ddeeff;
        border-radius: 30rpx;
        border-top-left-radius: 0;
        padding: 20rpx 30rpx 20rpx 30rpx;
        font-weight: 400;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;

        .answer_chat_content_img {
          width: 360rpx;
          height: 280rpx;
        }
      }
    }
  }

  .answer_left {
    margin-top: 42rpx;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;

    .v_icon {
      position: absolute;
      left: 52rpx;
      top: 60rpx;
      width: 26rpx;
      height: 26rpx;
    }

    .answer_chat {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .answer_chat_name {
        font-size: 24rpx;
        color: #999;
      }

      .answer_chat_content {
        margin-top: 15rpx;
        max-width: 456rpx;
        color: #333333;
        font-size: 28rpx;
        background-color: #ddeeff;
        border-radius: 30rpx;
        border-top-left-radius: 0;
        padding: 20rpx 30rpx 20rpx 30rpx;
        font-weight: 400;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;

        .answer_chat_content_img {
          width: 360rpx;
          height: 280rpx;
        }
      }
    }
  }

  .answer_right {
    margin-top: 42rpx;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;

    .v_icon {
      position: absolute;
      top: 60rpx;
      width: 26rpx;
      height: 26rpx;
    }

    .answer_chat {
      margin-right: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .answer_chat_name {
        font-size: 24rpx;
        color: #999;
      }

      .answer_chat_content {
        margin-top: 15rpx;
        max-width: 456rpx;
        color: #333333;
        font-size: 28rpx;
        background-color: #fff;
        border-radius: 30rpx;
        border-top-right-radius: 0;
        padding: 20rpx 30rpx 20rpx 30rpx;
        font-weight: 400;

        .answer_chat_content_img {
          width: 360rpx;
          height: 280rpx;
        }
      }
    }
  }
}

.quote_msg_left {
  margin-left: 15rpx;
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  padding: 10rpx;
  color: #999;
  max-width: 480rpx;
  max-height: 82rpx;
  background-color: #e8e8e8;
  border-radius: 8rpx;
}


.txt_item {
  max-width: 100%;
  max-height: 70rpx;
  line-height: 35rpx;
  font-size: 26rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.answer_review {
  margin-top: 20rpx;
  padding: 0 30rpx;
  // #ifdef APP-PLUS
  padding-bottom: 180rpx;
  // #endif
  .answer_title {
    color: #333333;
    font-weight: bold;
    font-size: 30rpx;
  }

  .review_show {
    margin-top: 60rpx;
    padding-bottom: 30rpx;
    color: #999;
    text-align: center;
  }

  .review_body {
    margin-top: 30rpx;

    .review_content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .review_left {
        position: relative;
        flex: 1;
        display: flex;
        align-items: flex-start;

        .v_icon {
          position: absolute;
          top: 44rpx;
          left: 40rpx;
          width: 20rpx;
          height: 20rpx;
          z-index: 999;
        }

        .review_user {
          flex: 1;
          margin-left: 24rpx;
          display: flex;
          flex-direction: column;

          .review_user_name {
            color: #666666;
            font-size: 24rpx;
          }

          .review_user_answer {
            margin-top: 8rpx;
            color: #333333;
            font-size: 28rpx;
          }

          .review-user_time {
            margin-top: 8rpx;
            color: #999999;
            font-size: 24rpx;
          }
        }
      }

      .review_right {
        display: flex;
        flex-direction: column;

        .right_top {
          display: flex;
          align-items: center;

          .review_right-img {
            width: 34rpx;
            height: 34rpx;
          }

          .review_right_text {
            color: #666666;
            font-size: 26rpx;
          }

          .good_text {
            color: #1c87f3;
          }
        }

        .right_bottom {
          margin-top: 40rpx;
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .perch_color {
      margin-top: 20rpx;
      height: 1rpx;
      background-color: #eee;
    }
  }
}

.answer_bto {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 110rpx;
  width: 100%;
  background-color: #fff;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .answer_bto_collect {
    margin-left: 26rpx;

    .answer_bto_img {
      width: 60rpx;
      height: 60rpx;
    }
  }

  .answer_bto_submit {
    margin-left: 26rpx;
    color: #999;
    font-size: 30rpx;
  }

  .answer_bto_submit_color {
    color: #1c87f3;
  }
}

.showMore {
  text-align: center;

  .close {
    line-height: 94rpx;
    background-color: #ffffff;
    width: 700rpx;
    height: 94rpx;
    margin: 12rpx auto;
    margin-bottom: 34rpx;
    border-radius: 16rpx;
  }
}

.moreItem {
  padding: 34rpx 26rpx;
  box-sizing: border-box;
  width: 700rpx;
  margin: 12rpx auto;
  border-radius: 16rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 162rpx;
  }

  .icon {
    width: 87rpx;
    height: 85rpx;
  }

  .title {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #646566;
  }
}

.patch {
  margin-top: 60rpx;

  .icon_bc {
    margin-right: 10rpx;
    width: 30rpx;
    height: 30rpx;
  }

  .content_item {
    margin-top: 30rpx;
    padding: 30rpx;
    width: 688rpx;
    background: #ffffff;
    border-radius: 21px;

    .item {
      padding: 35rpx 30rpx;

      &:not(:last-child) {
        border-bottom: 1rpx solid #e2e2e2;
      }

      .content {
        width: 510rpx;
      }

      .content_img {
        width: 260rpx;
        height: 280rpx;
      }
    }

    .v_icon {
      position: absolute;
      left: 54rpx;
      top: 62rpx;
      width: 26rpx;
      height: 26rpx;
      z-index: 99;
    }
  }
}

.pushFlow {
  margin: 0 auto;
  margin-top: 60rpx;
  width: 617rpx;
  height: 298rpx;
  background: #feead1;
  border-radius: 19rpx;
  padding: 24rpx 23rpx 36rpx 23rpx;
  .ticket {
    width: 569rpx;
    height: 136rpx;
    background: #ffffff;
    border-radius: 19rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .ticket_img {
      display: block;
      width: 90rpx;
      height: 90rpx;
    }

    .ticket_content {
      margin-left: 40rpx;
      .ticket_title {
        font-size: 36rpx;
        font-weight: 600;
        color: #ff4646;
        line-height: 52rpx;
      }

      .ticket_des {
        font-size: 26rpx;
        color: #999999;
        line-height: 38rpx;
      }
    }
  }

  .ticket_btn {
    width: 569rpx;
    height: 80rpx;
    margin-top: 30rpx;
    background: #ff6161;
    border-radius: 83rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 31rpx;
    color: #ffffff;
  }
}
</style>
